import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
import user from "./modules/user";
import setting from "./modules/setting";
// vuex:集中式的状态管理仓库
// 有两根主线
// 同步 组件 -> commit -> mutations -> 修改state
// 异步 组件 -> dispatch -> actions -> commit -> mutations -> state
export default new Vuex.Store({
  state: {
    count: 1,
    arr: [100, 200, 50, 51, 60, 70, 30, 40, 10, 20],
  },
  // 只能mutations才能操作state
  mutations: {
    add(state) {
      state.count++;
    },
    increment(state, num) {
      setTimeout(() => {
        state.count += num;
      }, 1000);
    },
  },
  actions: {
    // context 上下文件 就是store实例
    addAsync(context) {
      setTimeout(() => {
        context.commit("add");
      }, 1000);
    },
  },
  getters: {
    newArr(state) {
      return state.arr.filter((item) => item > 50);
    },
  },
  modules: {
    user,
    setting,
  },
});

// 结果没办法再做同样一遍操作复现出来

// mutations只能是同步

// ajax 异步 actions 首字母一样的
// this 上下文

// $store.commit('add')
// 集中式的计算属性
